<!--
 * @Description: 站点用户列表
 * @Author: Kerwin
 * @Date: 2024-10-28 17:44:20
 * @LastEditTime: 2024-11-03 11:37:49
 * @LastEditors:  Please set LastEditors
-->
<template>
	<view class="container">
		<view class="list">
			<view class="userBox" v-for="(item, index) in list" :key="index">
				<view class="avatar">
					<u-avatar :src="getImgFullPath(item?.user?.avatar)" size="110" mode="circle"></u-avatar>
					<text class="name">{{ item?.user?.nickname === '未设置昵称' ? item?.user?.username.replace(
						/^(\d{3})\d*(\d{4})$/, '$1****$2') : item?.user?.nickname }}</text>
				</view>
				<view class="content">
					<view class="actions">
						<text class="time">{{ dateFormat(new Date(item?.updateTime * 1000), 'MM-dd') }}</text>
						<view class="btns">
							<u-button type="success" style="margin-right: 20rpx;" ripple plain size="mini"
								@click="addContactor(item?.userId)">
								加好友</u-button>
							<u-button type="success" size="mini" ripple @click="toChat(item)">发消息</u-button>
						</view>
						<!-- <text class="tips">{{ dateFormat(new Date(item?.createTime * 1000),'MM-dd')}} 活跃</text> -->
					</view>
				</view>
			</view>
			<u-empty v-if="!list.length" text="暂无相关的用户" margin-top="160"></u-empty>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { socialApi } from '@/api';
import { getImgFullPath, dateFormat } from '@/utils';
import { route } from '@/utils/common';
import { useUserStore } from '@/store';
import RongIMLib from '@/packageD/common/rongCloud/im_init';

const userStore = useUserStore()

interface ItemOfList {
	user: {
		avatar: string
		nickname: string
		[key: string]: any
	}
	createTime: number
	[key: string]: any
}
const list = ref<ItemOfList[]>([])
const pagination = reactive({
	pageIndex: 1,
	pageSize: 30,
	finished: false
})
const cid = ref('')
async function getData() {
	let { pageIndex, pageSize, finished } = pagination
	if (finished) return
	uni.showLoading({
		title: '加载中...',
		mask: true
	})
	const { data, current, pages } = await socialApi.getChatGroupUsers({
		friendCircleId: parseInt(cid.value),
		noPaging: true
	}).finally(() => {
		uni.hideLoading()
	})
	if (data && data.length) {
		list.value.push(...data)
	}
	if (current < pages) {
		pageIndex++
	} else {
		finished = true
	}
}
function toChat(data: { userId: any; }) {
	route({
		url: '/packageD/pages/chat/index',
		params: {
			conversationType: RongIMLib.ConversationType.PRIVATE,
			userId: data.userId,
			targetId: data.userId
		}
	})
}
// 加好友
async function addContactor(addUserId: any) {
	uni.showLoading()
	const { data } = await socialApi.addChatFriend(userStore.userInfo.id, addUserId).finally(() => {
		uni.hideLoading()
	})
	uni.showToast({
		title: '添加成功',
		icon: 'success',
	})
}
onLoad((options) => {
	if (options?.cid) {
		cid.value = options.cid
		getData()
	}
})
onReachBottom(() => {
	getData()
})

</script>

<style lang="scss" scoped>
@import '@/styles/helper.scss';

.container {
	min-height: 100vh;
	background: #fff;

	.tabs {
		position: sticky;
		top: 0;
		// #ifdef H5
		top: calc(env(safe-area-inset-top));
		// #endif
		background: hsl(0, 0%, 100%);
		z-index: 2;
	}

	.swiper {
		height: calc(100vh - 80rpx - 44px);
	}

	.userBox {
		display: flex;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;

		.avatar {
			display: flex;
			align-items: center;
			justify-content: center;

			.name {
				margin-left: 30rpx;
				font-size: 28rpx;
				max-width: 340rpx;
				@include ellipsis;
			}
		}

		.content {
			flex: 1;
			margin-left: 20rpx;

			.actions {
				display: flex;
				align-items: flex-end;
				flex-direction: column;
				justify-content: flex-end;
				gap: 20rpx;

				.tips {
					color: #999;
				}

				.time {
					color: #999;
					text-align: center;
				}
			}
		}
	}
}
</style>
